<template>
  <div id="home">
    <nav-bar class="home-nav"><div slot="center">加油嗷</div></nav-bar>
    <tab-control @tabClick="tabClick" 
    ref="tabControl1"
    :titles="['流行','新款','精选']"
    v-show="isTabFixed"/>
    <scroll class="content" 
      ref="scroll" 
      @scroll="contentScroll"
      @pullingUp="loadMore"
      >
    <swiper class="swiper" :list="list" @imageLoad="imageLoad" />
    <recommend-view :recommends="recommends" @imageLoad="imageLoad" />
    <feature-view @imageLoad="imageLoad" />
    <!-- titles传入标题 @tabClick从组件内部传出index 用于根据index的不同显示不同的GoodList -->
    <tab-control @tabClick="tabClick" ref="tabControl2" class="tab-control" :titles="['流行','新款','精选']" />
    <good-list :goods="goods[this.currentType].list" />
    </scroll>

    <back-top @click.native="backClick" v-show="isShowBackTop" />
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import Swiper from "components/common/swiper/Swiper";
import TabControl from "components/content/tabControl/TabControl";
import GoodList from "components/content/goods/GoodList";
import Scroll from "components/common/scroll/Scroll";
import BackTop from "components/content/backTop/BackTop";

import { getHomeMultidata,getHomeGoods } from 'network/home';
import { debounce } from "common/utils";


import RecommendView from "./childComps/RecommendView";
import FeatureView from "./childComps/FeatureView";

 export default {
   name:'Home',
   components:{
    NavBar,
    Swiper,
    RecommendView,
    FeatureView,
    TabControl,
    GoodList,
    Scroll,
    BackTop
   },
   data(){
     return{
       goods:{
        pop:{page:0,list:[]},
        new:{page:0,list:[]},
        sell:{page:0,list:[]},
       },
       list:[],
       recommends:[],
       currentType:'pop',
       isShowBackTop:false,
       tabOffsetTop:0,
       isTabFixed:false
     }
   },
  //下面的代码用于其他页面回来后停留效果 但有一些小问题先注释掉
  //  activated(){
  //    this.$refs.scroll.scroll.scrollTo(0,this.saveY,0)
  //    this.$refs.scroll.refresh()
  //  },
  //  deactivated(){
  //    this.saveY = this.$refs.scroll.scroll.getScrollY()
  //  },
   created(){
     //网络
      getHomeMultidata().then(res=>{
        // console.log(res)
        this.list = res.data.data.banner.list;
        this.recommends = res.data.data.recommend.list
      })
      this.getHomeGoods("pop")      
      this.getHomeGoods("new")      
      this.getHomeGoods("sell") 
   },
    mounted() {
    // 这段代码用于解决图片加载的Bug 但有一些小问题先注释掉

    //监听图片加载完成执行refresh重新计算scrollerHeight高度
    // const refresh = debounce(this.$refs.scroll.refresh, 50);
    // this.$bus.$on("imgLoad", () => {
    //   // console.log('111');
    //   refresh();
    // });
  },
   methods:{
     //传入index 判断index 来传递不同的currentType
     tabClick(index){       
       switch(index){
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
      }
      //用于记录点击tabControl的索引值
      this.$refs.tabControl1.currentIndex = index
      this.$refs.tabControl2.currentIndex = index
     },
     imageLoad(){
       //图片加载完 记录tabControl距离顶部的高度
       this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop  
     },
     loadMore(){
       //下拉刷新
       this.getHomeGoods(this.currentType)
     },
     backClick(){
        //先拿到定义的ref的scroll --> 拿到scroll的属性 --> scrollto的方法
        this.$refs.scroll.scroll.scrollTo(0,0,750)
     },
     contentScroll(position){ 
       //得到的position都是负值
       //当position到1000时显示置顶图标
       this.isShowBackTop = -position.y >1000
       //当position大于计算的高度时 另一个tabOffsetTop显示置顶
       this.isTabFixed = (-position.y) > this.tabOffsetTop
     },
     getHomeGoods(type){
       //type由created调用该函数的时候加入
       const page = this.goods[type].page +1
       getHomeGoods(type,page).then(res => {
        //  console.log(res);
        //向goods对象中的list添加res的list数据
         this.goods[type].list.push(...res.data.data.list)
         this.goods[type].page +=1

         //finishPullDown()下拉事件只执行一次
         this.$refs.scroll.scroll.finishPullUp()

       })
     }
     
   }
 }
</script>

 
<style scoped>
#home {
  /* padding-top:44px; */
  height: 100vh;
  position: relative;
}
.home-nav {
  background-color: var(--color-tint);
  color: #fff;
  font-size: 20px;
}
.tab-control{
  position: relative;
  z-index: 9;
}


/* .content{
    /* 动态计算长度值 */
/* height: calc(100% - 93px); */
/* overflow: hidden; */
/* margin-top:44px; */
/* }  */
.content {
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
.flush-img{
  position: relative;
  top:0;
  margin: 0 auto;
  left:0;
  right: 0;
}

</style>
